<template>
  <!--  匹配政策  -->
  <el-row :gutter="0">
    <el-col :span="11">
      <div class="checkbox">
        <div>
          <el-checkbox class="bordered-checkbox" v-model="checkedFive" label="五星" size="large" />
        </div>
        <div class="bordered-checkbox-div">
          <el-checkbox class="bordered-checkbox" v-model="checkedFour" label="四星" size="large" />
        </div>
        <div class="bordered-checkbox-div">
          <el-checkbox class="bordered-checkbox" v-model="checkedThree" label="三星" size="large" />
        </div>
        <div class="bordered-checkbox-div">
          <el-checkbox class="bordered-checkbox" v-model="checkedTwo" label="规划" size="large" />
        </div>
        <span
          >预计可申报资助<span style="font-size: 32px; color: #c9161b">{{ sumAmountSubsidy }}</span>
          万</span
        >
      </div>
    </el-col>

    <el-col :span="13">
      <div class="checkbox">
        <div>
          <el-input
            v-model="name"
            style="width: 240px; height: 40px"
            placeholder="请输入项目名称"
            prefix-icon="Search"
          />
        </div>
        <el-button style="margin-left: 10px; height: 40px" type="primary" @click="getDetail"
          >搜索</el-button
        >
        <el-button type="primary" style="height: 40px">导出</el-button>
        <el-button type="primary" plain style="height: 40px">添加项目</el-button>
        <el-button type="primary" plain style="height: 40px">回收站</el-button>
        <el-button type="danger" style="height: 40px">删除</el-button>
      </div>
    </el-col>
  </el-row>

  <el-table :data="tableData" style="width: 100%; margin-top: 20px" stripe>
    <el-table-column type="selection" align="center" />
    <el-table-column property="projectName" label="项目名称" align="center" />
    <el-table-column property="acceptanceDepartment" label="受理部门" align="center" />
    <el-table-column property="declarationTime" label="申报时间" align="center" />
    <el-table-column label="匹配度" align="center">
      <template #default="scope">
        <el-rate
          v-model="scope.row.rating"
          :max="5"
          :disabled="true"
          void-color="#c6c6c6"
          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
        ></el-rate>
      </template>
    </el-table-column>
    <el-table-column property="amountSubsidy" label="资质额度" align="center" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <!-- <el-button type="danger" :icon="Delete" circle /> -->
        <el-button type="primary" :icon="Info" @click="handleDetail(scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!---------------------- 分页 ---------------------->
  <div class="pagination" style="">
    <el-pagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <project :visible="dialogVisible" :project="project" @update:visible="dialogVisible = $event" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type ComponentSize, ElTable } from 'element-plus'
import { detailMatching } from '@/api/customer/customer'
import { detailEdit, detailAdd, detailDetail } from '@/api/detail'
import Project from './project-comp.vue'
import { Delete } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const checkedFive = ref(false)
const checkedFour = ref(false)
const checkedThree = ref(false)
const checkedTwo = ref(false)
const name = ref('')

const project = reactive({})
const dialogVisible = ref(false)
const handleDetail = (row) => {
  getProjectDetail(row)
  dialogVisible.value = true
}

const getProjectDetail = async (row: Record<string, any>) => {
  const data = await detailDetail({
    id: row.id
  })
  setFormData(data)
}

const setFormData = async (data: Record<string, any>) => {
  for (const key in data) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      project[key] = data[key]
    }
  }
}

interface User {
  companyName: string
  rating: number
}
const tableData = ref([])

const rating = computed(() => {
  const ratings = []
  if (checkedFive.value) ratings.push(5)
  if (checkedFour.value) ratings.push(4)
  if (checkedThree.value) ratings.push(3)
  if (checkedTwo.value) ratings.push(2)
  return ratings
})

const getDetail = async () => {
  const data = await detailMatching({
    id: route.query.id,
    selectedRatings: rating.value,
    projectName: name.value
  })
  console.log('数据', data)
  // 假设返回的数据结构如下：
  const responseData = data
  console.log('条数', responseData.length)
  // 映射返回的数据到 tableData
  if (responseData.length > 0) {
    tableData.value = responseData.map((item) => ({
      id: item.id,
      projectName: item.projectName || '未命名公司', // 处理可能为空的公司名
      rating: item.rating || 0, // 处理可能为空的评分
      declarationTime: item.declarationTime || '未启动',
      amountSubsidy: item.amountSubsidy,
      acceptanceDepartment: item.acceptanceDepartment
    }))
  } else {
    tableData.value = []
  }
}
watch(rating, () => {
  console.log('选中的星级:', rating.value) // 打印选中的星级数组
  getDetail() // 当选中的星级变化时，调用获取数据的方法
})
setTimeout(() => {
  getDetail()
}, 2000)

const sumAmountSubsidy = computed(() => {
  return tableData.value.reduce((sum, item) => sum + (item.amountSubsidy || 0), 0)
})

const total = tableData.value.length
const currentPage1 = ref(5)

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.checkbox {
  display: flex;
  align-items: center;
}

.checkbox span {
  margin-left: 10px;
}

.bordered-checkbox {
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
